<template lang="html">
  <div class="deer" v-if='friendData.length'>
      <div class="top-tab">
        <tabs :value='value' @getIndex ='getCurrentIndex'>
          <tab label='消息' index='1'>
            <div class="search">
              <div class="search-icon"></div>
              <input type="text" name="" value="" placeholder="搜索" ref='input' >
              <div class="close-icon"  @click='closeHandle'></div>
            </div>
            <div class="message-block">
              <div class="message-list">
                <router-link class="message-item" tag='div' :to="{ name:'Chat',params:{chatName:item.username,img:item.header_img}}" v-for='(item,index) in chatData' :key='index' >
                  <div class="header-img" >
                    <img :src="item.header_img" alt="">
                  </div>
                  <div class="message-contant" >
                    <p class='username'>{{item.username}}</p>
                    <p class='chat-msg'>{{item.chat_content}}</p>
                    <span class='time'>{{item.time}}</span>
                  </div>
                </router-link>
              </div>
            </div>
          </tab>
          <tab label='好友' index='2'>
            <div class="deer-nav">
              <ul>
                <router-link tag='li'  to='/add'> 添加好友
                  <div class='add-friend'></div>
                </router-link >
                <router-link tag='li'  to='/search'> 搜索
                  <div class='search-friend'></div>
                </router-link >
                <router-link tag='li' to='/scanning'> 扫一扫
                  <div class='scanning'></div>
                </router-link >
              </ul>
            </div>
            <div class="friend-block">
              <div class="first-letter"> A </div>
              <div class="friend-list">
                <router-link  class="friend-item" v-for='(item,index) in friendData' :key='index' :to="{ name:'Chat',params:{chatName:item.name,img:item.img}}">
                  <div class="header-img" >
                    <img :src="item.img" alt="">
                  </div>
                  <div class="friend-contant">
                    <p class='username'>{{item.name}}</p>
                  </div>
                </router-link >
              </div>
            </div>
          </tab>
        </tabs>
      </div>
  	<FootNav />
  </div>

</template>

<script>

	import FootNav from '../../components/FootNav.vue'
	export default {
	  name:"Deer",
    data(){
      return {
        value:1 , //默认tab切换显示第一个
        friendData:[],
        chatData:[],
        message:'',
        chatName:''
        // friendData:[
        //   {
        //     id:1,
        //     username:'酷酷的琦',
        //     content:'aaaaaaaaa',
        //     time:'17:05'
        //   },
        //   {
        //     id:2,
        //     username:'红叶雨',
        //     content:'不不不不不不不不不不不不',
        //     time:'14:20'
        //   },
        //   {
        //     id:3,
        //     username:'稻草人',
        //     content:'成长成才吃吃吃吃吃吃',
        //     time:'12:00'
        //   },
        //   {
        //     id:4,
        //     username:'小浣熊你好',
        //     content:'哐哐哐哐哐哐哐哐哐',
        //     time:'昨天'
        //   },
        //   {
        //     id:5,
        //     username:'手可摘星辰',
        //     content:'反反复复反反复复反反',
        //     time:'昨天'
        //   },
        //   {
        //     id:6,
        //     username:'鸿雁',
        //     content:'著走著走著走著走著走',
        //       time:'昨天'
        //   }
        // ],
        // imgs:[
        //   require('../../assets/pics/haoyou_02.png'),
        //   require('../../assets/pics/haoyou_01.png'),
        //   require('../../assets/pics/haoyou_04.png'),
        //   require('../../assets/pics/haoyou_05.png'),
        //   require('../../assets/pics/haoyou_03.png'),
        //   require('../../assets/pics/haoyou_06.png'),
        // ]
      }
    },
    methods:{
        getCurrentIndex(index){
          this.value = index;
        },
        closeHandle(event){
          this.$refs.input.value = '';
        }
    },
	  components:{
	  	FootNav
	  },
    mounted(){
      this.$axios.get(this.HOST + '/api/friendData')
        .then(res =>{
          this.friendData = res.data.friendData
          this.chatData = res.data.chatData
          console.log(this.friendData);
          console.log(this.chatData);
        })
        .catch(error =>{
          console.log(error);
        })
      }
  }
</script>

<style lang="css" scoped>
.deer{
  width:100%;
}
.tab.active{
  color:#5DACE4!important;
  text-decoration: none;
}
.top-tab{
  width:100%;
  line-height: 0.8rem;
  background-color: #7DD19D;
  height:0.8rem;
}
.tab{
  width:50%;
  font-size: 0.36rem;
  margin-right: 0;
  line-height: 0.8rem!important;
}
.search{
  position:relative;
  padding-left: 0.2rem;
}
.search-icon{
  background: url('../../assets/icon/icon_search.png') no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.32rem;
  height: 0.32rem;
  display: inline-block;
  position: absolute;
  top: 0.48rem;
  left: 0.42rem;
}
.close-icon{
  background: url('../../assets/icon/close.png') no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.2rem;
  height: 0.2rem;
  display: inline-block;
  position: absolute;
  top:0.53rem;
  right:0.4rem;
}
.search input{
  width: 97%;
  height: 0.8rem;
  border-radius: 0.34rem;
  border: 0;
  box-sizing: border-box;
  padding-left:0.66rem;
  font-size: 0.3rem;
  background-color: #fff;
}
.message-block{
  width:100%;
  margin-top: 0.26rem;
  height:2rem;
}
.message-list{
  background-color: #fff;
}
.message-item{
  height:1.2rem;
  border-bottom: 1px solid #F7F7F7;
  padding: 0.1rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
}
.header-img{
  width:1rem;
  height:1rem;
  border-radius:50%;
  overflow: hidden;
}
.header-img img{
  width:100%;
  height:100%;
}
.message-contant{
  line-height: 0.4rem;
  margin-left: 0.2rem;
  padding-top: 0.1rem;
}
.username{
  font-size: 0.3rem;
  color:#5C5C5C
}
.chat-msg{
  width:90%;
  font-size: 0.28rem;
  color:#999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time{
  position: absolute;
  font-size: 0.22rem;
  color:#B4B4B4;
  right: 0;
  right: 0.2rem;
  top: 0.2rem;
}
.deer-nav{
  width:100%;
  height:0.8rem;
  background-color: #fff;
  font-size: 0.30rem;
}
.deer-nav ul{
  display: flex;
}
.deer-nav li{
  flex: 1;
  text-align: center;
  position: relative;
}
.add-friend{
  background: url('../../assets/icon/icon_add.png') no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  position: absolute;
  top:0.2rem;
  left:0.2rem;
}
.search-friend{
  background: url('../../assets/icon/icon_search.png') no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  position: absolute;
  top:0.2rem;
  left:0.5rem;
}
.scanning{
  background: url('../../assets/icon/icon_saoyisao.png') no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  position: absolute;
  top:0.2rem;
  left:0.3rem;
}
.friend-block{
  width:100%;
  height:2rem;
}
.friend-block .first-letter{
  width:100%;
  height:0.8rem;
  font-size: 0.3rem;
  padding:5px 10px;
  box-sizing: border-box;
}
.friend-list{
  background-color: #fff;
}
.friend-item{
  height:1.2rem;
  border-bottom: 1px solid #F7F7F7;
  line-height: 1.2rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
}
.friend-contant{
  line-height: 0.4rem;
  margin-left: 0.2rem;
  padding-top: 0.3rem;
}
</style>
